<template>
  <div
    class="container"
    v-empty="!canShowIndex"
    xs-empty-icon="nopermission"
    xs-empty-text="暂无权限"
  >
    <flexbox class="header">
      <div class="name">{{ data.row.name }}</div>
      <!-- <div class="detail">商机（{{ list.length }}）</div> -->
      <img @click="hidenView" class="close" src="@/assets/img/task_close.png" />
    </flexbox>
    <el-table
      v-loading="loading"
      :data="list"
      height="250"
      stripe
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      @row-click="handleRowClick"
      style="margin-right: 3px"
      highlight-current-row
    >
      <el-table-column
        v-for="(item, index) in fieldList"
        :key="index"
        align="center"
        header-align="center"
        show-overflow-tooltip
        :formatter="fieldFormatter"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { crmBusinessIndex } from "@/api/customermanagement/business";

export default {
  /** 客户管理 的 客户列表  相关商机列表*/
  name: "business-check",
  components: {},
  computed: {
    ...mapGetters(["crm"]),
    canShowIndex() {
      return this.crm.business && this.crm.business.index;
    },
  },
  watch: {
    show: {
      handler(val) {
        if (
          this.canShowIndex &&
          val &&
          this.data.row &&
          this.data.row.business_count > 0 &&
          this.list.length == 0
        ) {
          this.getDetail();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  props: {
    show: Boolean,
    data: {
      type: Object,
      default: () => {
        return {
          row: {
            name: "",
          },
        };
      },
    },
  },
  data() {
    return {
      loading: false,
      list: [],
      fieldList: [],
      /** 格式化规则 */
      formatterRules: {},
    };
  },
  mounted() {
    this.fieldList.push({ prop: "name", width: "200", label: "商机名称" });
    this.fieldList.push({
      prop: "money",
      width: "200",
      label: "商机金额",
    });
    this.fieldList.push({
      prop: "customer_id",
      width: "200",
      label: "客户名称",
    });
    this.fieldList.push({ prop: "type_id", width: "200", label: "商机状态组" });
    this.fieldList.push({ prop: "status_id", width: "200", label: "状态" });

    // 为客户名称 商机状态组 状态 加入字段格式化展示规则
    function crmFieldFormatter(info) {
      return info ? info.name : "";
    }
    this.formatterRules["customer_id"] = {
      type: "crm",
      formatter: crmFieldFormatter,
    };
    function fieldFormatter(info) {
      return info ? info : "";
    }
    this.formatterRules["type_id"] = {
      type: "crm",
      formatter: fieldFormatter,
    };
    this.formatterRules["status_id"] = {
      type: "crm",
      formatter: fieldFormatter,
    };
  },
  methods: {
    getDetail() {
      this.loading = true;
      crmBusinessIndex({
        pageType: "all",
        customer_id: this.data.row.customer_id,
      })
        .then((res) => {
          this.loading = false;
          this.list = res.data.list;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /** 格式化字段 */
    fieldFormatter(row, column) {
      // 如果需要格式化
      var aRules = this.formatterRules[column.property];
      if (aRules) {
        if (aRules.type === "crm") {
          if (column.property) {
            return aRules.formatter(row[column.property + "_info"]);
          } else {
            return "";
          }
        } else {
          return aRules.formatter(row[column.property]);
        }
      }
      return row[column.property];
    },
    hidenView() {
      document.querySelector("#app").click();
      this.$emit("close", this.$el, this.data);
    },
    //当某一行被点击时会触发该事件
    handleRowClick(row, column, event) {
      this.$emit("click", row);
    },
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return { fontSize: "12px", textAlign: "center", cursor: "pointer" };
    },
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return { fontSize: "12px", textAlign: "center" };
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
}

.header {
  height: 40px;
  padding: 0 10px;
  flex-shrink: 0;
  .name {
    font-size: 13px;
    padding: 0 10px;
    color: #333;
  }
  .detail {
    font-size: 12px;
    padding: 0 10px;
    color: #aaaaaa;
    border-left: 1px solid #aaaaaa;
  }
  .close {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 10px;
    padding: 10px;
  }
}
</style>
